import React from 'react'

const scaleNames = {
	c: 'Celsius',
	f: 'Fahrenheit',
}

export class TemperatureInput extends React.Component {
	constructor(props) {
		super(props)
		this.handleChange = this.handleChange.bind(this)
		this.state = { temperature: '' }
	}

	handleChange(e) {
		// this.setState({ temperature: e.target.value })
		this.props.onTemperature(e.target.value, this.props.scale)
	}

	render() {
		const temperature = this.props.temperature
		const scale = this.props.scale
		return (
			<fieldset>
				<legend>Enter temperature in {scaleNames[scale]}:</legend>
				<input value={temperature} onChange={this.handleChange} />
			</fieldset>
		)
	}
}
